{% extends "baseMenuMapa.html" %}
{% load crispy_forms_tags %}

{% block extras %}
<div class="container">

<div class="row">
{% if mensaje %}<div>{{ mensaje }}</div>{% endif %}
  	{% if error %} <div>Error: {{ error }}</div>{% endif %}
  <div class="span8"><div id="mapas" style="width:100%; height:350px;">Aca va el mapa</div></div>
  <div class="span4">{% crispy form %}</div>
</div>	
</div>
{% endblock %}

{% block marcas %}
	document.getElementById("id_action").value = document.location.search.substr(1);
    {% if stopList %}
    {% for stop in stopList %}
    {% if stop.paradaactiva %}
    markerPosition = new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}});
    marker = new google.maps.Marker({
        map:map,
        draggable:false,
        position: markerPosition,
        icon: markerImage,
        title: "Parada: {{ stop.calle1 }} {% if stop.calle2 %}& {{ stop.calle2 }}{% endif %}({{ stop.sentido }})",
    });
	limits.extend(markerPosition);
	{% endif %}        
    {% endfor %}
    
    var flightPlanCoordinates = [
      {% for stop in stopList %}
	    new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
      {% endfor %}
	];
	var flightPath = new google.maps.Polyline({
	    path: flightPlanCoordinates,
	    strokeColor: "#FF0000",
	    strokeOpacity: 1.0,
	    strokeWeight: 2
	});

 	flightPath.setMap(map);
    {% endif %}   
{% endblock %}
